<template>
  <el-menu
      :default-active="activeIndex"
      active-text-color="#ffd04b"
      background-color="#2d3a4b"
      class="el-menu-vertical-demo"
      router
      text-color="#fff"
  >
    <el-menu-item index="/index" @click="openTab({name:'首页',path:'/index'})">
      <el-icon>
        <home-filled/>
      </el-icon>
      <span >首页</span>
    </el-menu-item>
    <el-sub-menu v-for="(menu) in menuList" :key="menu.id" :index="menu.path">
      <template #title>
        <el-icon>
          <svg-icon :icon="menu.icon"/>
        </el-icon>
        <span>{{ menu.name }}</span>
      </template>
      <el-menu-item v-for="(item) in menu.children" :key="item.id" :index="item.path" @click="openTab(item)">
        <el-icon>
          <svg-icon :icon="item.icon"/>
        </el-icon>
        <span>{{ item.name }}</span>
      </el-menu-item>
    </el-sub-menu>

  </el-menu>
</template>
<script setup>
import {HomeFilled} from '@element-plus/icons-vue'
import {reactive, ref, watch} from 'vue'
import store from '@/store'

const menuList = reactive(store.getters.GET_MENU_LIST)
console.log('menuList', menuList)
const openTab = (item) => {
  store.commit('ADD_TABS', item)
}
const activeIndex=ref("/index")
watch(store.state,()=>{
  console.log("editableTabsValue="+store.state.editableTabsValue)
  activeIndex.value=store.state.editableTabsValue
},{deep:true,immediate:true})
</script>
<style lang="scss" scoped>
</style>